﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/view/common/taglibs.jsp"%>

<!DOCTYPE>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<meta http-equiv="Cache-Control" content="no-siteapp" />
	<title>PDF文件打印</title>

    <%@ include file="/WEB-INF/view/common/common.jsp"%>
	<script src="${_cdnStaticResourcesPath}/resources/static/js/jquery.SuperSlide.2.1.1.js" type="text/javascript" ></script>

	<style>
		html{
			overflow: auto;
		}
	</style>
</head>

<body>
<div class="margin clearfix">
	<div class="stystems_style">
		<div class="tabbable">
			<ul class="nav nav-tabs" id="myTab">
				<li class="active">
					<a data-toggle="tab" href="#tab_1"><i class="green fa fa-file-pdf-o bigger-110"></i>&nbsp;基于freemarker模板实现打印（单页码）</a>
				</li>
				<li class="">
					<%--<a data-toggle="tab" href="#tab_2"><i class="green fa fa-file-pdf-o bigger-110"></i>&nbsp;基于freemarker模板实现打印（多页码）<span class="badge badge-danger">4</span></a>--%>
					<a data-toggle="tab" href="#tab_2"><i class="green fa fa-file-pdf-o bigger-110"></i>&nbsp;基于freemarker模板实现打印（多页码）</a>
				</li>
			</ul>
			<div class="tab-content" style="padding: 0px!important;">
				<div id="tab_1" class="tab-pane active">
					<div class="margin clearfix">
						<div class="Order_Details_style">
							<div class="Numbering">PDF效果:<b style="font-size: 16px;">单页码的PDF</b></div>
						</div>
						<div class="detailed_style">
							<div class="Receiver_style">
								<div class="title_name">说明</div>
								<div class="Info_style clearfix">
									<div class="col-xs-11" style="padding: 10px;">
										<p style="padding: 10px;">当前打印为单页码的PDF；PDF中的数据为后台模拟生成的.</p>
										<p style="padding: 10px;">页面布局使用的是 freemarker 模板进行页面的设计排版，最终只需要将数据进行填充即可，很方便，基于模板打印将是一个不错的选择.</p>
									</div>
								</div>
							</div>
							<div class="product_style">
								<div class="title_name">PDF打印效果预览</div>
								<div class="Info_style clearfix" style="width:90%;margin:10px auto">
									<img style="width:300px;height: 450px;cursor:pointer;" onclick="window.open('${_cdnStaticResourcesPath}/resources/static/images/pdf_preview01.jpg','target','');" src="${_cdnStaticResourcesPath}/resources/static/images/pdf_preview01.jpg">
									<button style="margin-left: 200px;" onclick="pdfPrint1();" class="btn btn-primary radius" type="button"><i class="fa fa-print"></i>&nbsp;打印单页码PDF</button>
									<%--<div class="product_info clearfix">
										<img style="width:300px;height: 450px;" src="${_cdnStaticResourcesPath}/resources/static/images/pdf_preview01.jpg">
									</div>--%>
								</div>
							</div>
							<%--<div class="Button_operation">
								<button onclick="pdfPrint();" class="btn btn-primary radius" type="button"><i class="fa fa-print"></i>&nbsp;打印单页码PDF</button>
							</div>--%>
						</div>
						<!--单页码PDF打印的form表单-->
						<form action="${ctx}/pdf/print" target="_blank" method="post" id="printForm1">
                            <input type="hidden" name="single" value="true"/>
                        </form>
					</div>
					<%--<div class="Button_operation">
						<button onclick="article_save_submit();" class="btn btn-primary radius" type="submit"><i class="fa fa-save "></i>&nbsp;保存</button>
						<button onclick="layer_close();" class="btn btn-default radius" type="button">&nbsp;&nbsp;取消&nbsp;&nbsp;</button>
					</div>--%>
				</div>
				<div id="tab_2" class="tab-pane ">
					<div class="margin clearfix">
						<div class="Order_Details_style">
							<div class="Numbering">PDF效果:<b style="font-size: 16px;">多页码的PDF</b></div>
						</div>
						<div class="detailed_style">
							<div class="Receiver_style">
								<div class="title_name">说明</div>
								<div class="Info_style clearfix">
									<div class="col-xs-11" style="padding: 10px;">
										<p style="padding: 10px;">当前打印为多页码的PDF.</p>
										<p style="padding: 10px;">这里只模拟2页码数据；你也可以自定义打印的页码数；可以发现，PDF排版是一样的，只是数据填充的不同而已.</p>
										<p style="padding: 10px;">页面布局使用的是 freemarker 模板进行页面的设计排版，最终只需要将数据进行填充即可，很方便，基于模板打印将是一个不错的选择.</p>
									</div>
								</div>
							</div>
							<div class="product_style">
								<div class="title_name">PDF打印效果预览</div>
								<div class="Info_style clearfix" style="width:90%;margin:10px auto">
									<img style="width:300px;height: 850px;cursor:pointer;" onclick="window.open('${_cdnStaticResourcesPath}/resources/static/images/pdf_preview02.jpg','target','');"
										 src="${_cdnStaticResourcesPath}/resources/static/images/pdf_preview02.jpg">
									<button style="margin-left: 200px;margin-top: -200px;" onclick="pdfPrint2();" class="btn btn-primary radius" type="button"><i class="fa fa-print"></i>&nbsp;打印多页码PDF</button>
								</div>
							</div>
						</div>
						<!--单页码PDF打印的form表单-->
						<form action="${ctx}/pdf/print" target="_blank" method="post" id="printForm2">
                            <input type="hidden" name="single" value="false"/>
                        </form>
					</div>
				</div>
			</div>
		</div>
	</div>

</div>
</body>
</html>

<script>

    /**
	 * 打印PDF
     */
	function pdfPrint1() {
		$("#printForm1").submit();
    }
    function pdfPrint2() {
        $("#printForm2").submit();
    }

</script>

